<template>
  <div class="user-comments">
    <div class="wrapper">
      <div class="section-title">他们正在使用</div>
      <div class="user-text">{{comments[active].content}}</div>
      <div class="users">
        <div class="message" v-for="(item, index) in comments" :key="item.id" @click="active=index"
          :class="{active: index === active}"
        >
          <div class="avatar-wrapper">
          <img class="avatar" :src="item.photo">
          </div>
          <div class="detail">
            <div class="name">{{item.title}}</div>
            <div class="corp">{{item.section}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      comments: [
        {
          id: 1,
          content:
            '我们的问卷投放量很大，每次问卷调查都是一次品牌形象宣传，因此除了问卷功能，更注重系统环境的稳定性。在评估后，我们决定选择腾讯问卷，事实证明百万的问卷数据承载毫无压力，可靠！',
          photo: 'https://wj.qq.com/image/avatar_thomas.png',
          title: 'Thomas',
          section: '小米路由器',
        },
        {
          id: 2,
          content:
            '腾讯问卷提供的调查问卷模板可订制化服务，增加了页面趣味性，降低了用户点击成本，问卷的回收率简单轻松翻倍，还收获了不少用户的好评。',
          photo: 'https://wj.qq.com/image/avatar_cctv.png',
          title: '315晚会',
          section: '中央电视台',
        },
        {
          id: 3,
          content:
            '界面简洁轻量，QQ登录即可免费使用，问卷发布快捷方便，再也不用人工处理问卷数据，大大节省了调研成本，是很赞的自助式在线问卷调查服务的平台！',
          photo: 'https://wj.qq.com/image/avatar_tongcheng.png',
          title: '火车票调查',
          section: '同程网',
        },
        {
          id: 4,
          content:
            '腾讯问卷在编辑方式上更加灵活高效，不同用户环境下的交互体验更友好，前端稳定性、安全性表现尤为优异，为海量车主调研项目提供了可靠的基础支撑，用起来更踏实！',
          photo: 'https://wj.qq.com/image/avatar_didi.png',
          title: '滴滴代驾',
          section: '滴滴',
        },
        {
          id: 5,
          content:
            '腾讯问卷的扁平化设计做得很好，交互设计的体验也很棒，在对比多个平台后选择使用腾讯问卷，帮我轻轻松松完成了调研！',
          photo: 'https://wj.qq.com/image/avatar_lianjia.png',
          title: '链家网',
          section: '链家',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.user-comments {
  background-color: #fafafa;
  margin-top: 46px;
}

.wrapper{
  box-sizing: border-box;
}

.section-title {
  text-align: center;
  padding: 35px 0 0;
  color: #999999;
  font-size: 20px;
}

.user-text{
  height: 48px;
  margin-top: 21px;
  line-height: 1.5;
}

.users{
  padding: 31px 20px 40px 20px;
  display: flex;
  border-top: 2px solid #dddddd;
  margin-top: 61px;
  align-items:center;
  justify-content: space-between;
}

.message{
  position: relative;
  width: 150px;
  display: flex;
  opacity: .5;
  cursor: pointer;
}

.avatar{
  height: 50px;
  width: 50px;
}

.detail{
  margin-left: 11px;
  // margin-top: 4px;
}

.name{
  font-size: 14px;
  margin-bottom: 3px;
}

.corp{
  font-size: 14px;
  color: #999;
}

.message:hover::before,
.message.active::before{
  content: '';
  height: 3px;
  width: 50px;
  background: #58a6e7;
  position: absolute;
  top: -33px;
}

.message.active {
  opacity: 1;
}
</style>
